<template>
    <div>
        <div class="detail-bar" v-for="comment in userComment" :key="comment.rateId">
            <div class="detail-user">
                <div class="detail-user-img"
                    :style="`background-image:url(${comment.user.avatar})`"
                ></div>
                <div class="detail-user-name">
                    <p>{{comment.user.uname}}</p>
                    <span>2019年{{comment.time}} 中午12:05:33</span>
                </div>
            </div>
            <p>{{comment.content}}</p>
            <div class="detail-goods-img">
                <img v-for="(img,i) in comment.images" :key="i"
                    :src="img"
                >
                <!-- <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg">
                <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg">
                <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg">
                <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg">
                <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg"> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        userComment:{
            type:Array,
            default(){
                return [];
            }
        }
    }
}
</script>
<style lang="less" scoped>
.detail-bar {
    width: 100%;
    box-sizing: border-box;
    padding:0.4rem 0.2rem;
    > .detail-user {
        display:flex;
        flex-flow:row nowrap;
        > .detail-user-img {
            // background-image: url("../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg");
            background-size: 100% 100%;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
        }
        >.detail-user-name{
            display:flex;
            flex-flow:row wrap;
            align-items:center;
            padding:0.25rem;
            >p{
                width:100%;
            }
            >span{
                color:@gray;
                font-size:0.26rem;
            }
        }
    }
    >p{
        padding:0.3rem 0rem;
        text-indent:0.4rem;
    }
    >.detail-goods-img{
        width:100%;
        box-sizing:border-box;
        display:flex;
        flex-flow:row wrap;
        >img{
            width:20%;
            height:1.6rem;
            padding:0.15rem;
            
        }
    }
}
</style>